<template>
	<view class="idcard-info-box">
		<!-- 法人信息文字提示组件 -->
		<view class="idcard-info-top-box">
			<text class="title">仅用于商户认证使用</text>
			<text class="sub-title">请拍摄法人身份证正反面照片及手持身份证照</text>
		</view>
		<!-- 法人信息照片组件 -->
		<view class="idcard-info-images-box">
			<view class="idcard-info-images-top-box">
				<image class="idcard-info-image" :src="formStore.frontPhoto || '/static/idcard_front.png'" mode="scaleToFill" @tap="showSelectImage(1)"></image>
				<image class="idcard-info-image" :src="formStore.reversePhoto || '/static/idcard_back.png'" mode="scaleToFill" @tap="showSelectImage(2)"></image>
			</view>
			<view class="idcard-info-images-bottom-box">
				<image class="idcard-info-hand-image" :src="formStore.handsetPhoto || '/static/idcard_hand.png'" mode="scaleToFill" @tap="showSelectImage(3)"></image>
				<image class="idcard-info-hand-image" src="/static/idcard_hand_demo.png" mode="scaleToFill"></image>
			</view>
		</view>
		<!-- 表单标题 -->
		<view class="idcard-info-title">请核对自动识别信息，若有误请更正</view>
		<view class="idcard-info-form">
			<xh-form-input title="姓名" placeholder="请输入姓名" v-model="formStore.userRealName"></xh-form-input>
			<xh-form-input title="身份证号" placeholder="请输入身份证号" v-model="formStore.identityNo"></xh-form-input>
			<xh-form-date title="有效日期"></xh-form-date>
			<xh-form-textarea title="住址" v-model="formStore.address"></xh-form-textarea>
			<view class="type-top-box" v-if="formStore.merType == '0'">
				<text class="type-top-text">结算账户类型</text>
				<xh-radio title="对私" :isSelect="formStore.settleType == '1'" @change="change('1')"></xh-radio>
				<xh-radio class="type-radio" title="对公" :isSelect="formStore.settleType == '0'" @change="change('0')"></xh-radio>
				<view class="type-line"></view>
			</view>
		</view>
		<!-- 底部提交按钮组件 -->
		<xh-submit title="下一步" @btnClick="buttonClick"></xh-submit>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useFormStore, useUserStore } from '@/stores'
	import { getImageInfoByOcr,getMerchantInfo } from '@/config/api.js'
	
	const formStore = useFormStore()
	const userStore = useUserStore()
	onLoad( async ()=>{
		if(formStore.merType == '1'){
			await userStore.updateUserInfo()
			if(userStore.user.authStatus != '01' && (userStore.user.authStatus == '03' || userStore.user.authStatus == '00' || userStore.reportStatus == '2')){
				getMerchantInfoData()
			}
		}
	})
	//改变结算卡类型
	const change = (type) => {
		formStore.settleType = type
	}
	/* 选择照片
	type: 1：身份证正面照片 2：身份证反面照片 3：手持身份证照片
	 */
	const showSelectImage = async (type)=>{
		try{
			const res = await uni.$tools.uploadImage()
			if (type == 1) {
				formStore.frontPhoto = res
				getOcrInfo(type,res)
			}
			else if (type == 2) {
				formStore.reversePhoto = res
				getOcrInfo(type,res)
			}
			else{
				formStore.handsetPhoto = res
			}
		}catch(e){
			uni.$tools.showToast(e)
		}
	}
	// 获取ocr识别信息
	const getOcrInfo = async (type,url)=>{
		let params = {}
		params.fileUrl = url
		params.apiType = '01'
		params.frontOrBack = type == 1 ? 'F' : 'B'
		const res = await getImageInfoByOcr(params)
		const ocrInfo = JSON.parse(res.result.data)
		const ocrRes = ocrInfo.words_result
		if(uni.$u.test.isEmpty(ocrRes)){
			return
		}
		if (type == 1) {
			// 身份证正面信息
			formStore.userRealName = ocrRes['姓名'].words
			formStore.identityNo = ocrRes['公民身份号码'].words
			formStore.sex = ocrRes['性别'].words
			formStore.nation = ocrRes['民族'].words
			formStore.address = ocrRes['住址'].words
		}
		else{
			// 身份证反面信息
			let startDate = ocrRes['签发日期'].words
			let endDate = ocrRes['失效日期'].words
			if(startDate){
				startDate = uni.$tools.formatDate_hg(startDate)
				if (endDate.indexOf('长') >= 0){
					endDate = '长期'
					formStore.isLongTime = true
				}
				else{
					endDate = uni.$tools.formatDate_hg(endDate)
					formStore.isLongTime = false
				}
			}
			formStore.certStartTime = startDate
			formStore.certEndTime = endDate
			formStore.certValidTime = `${formStore.certStartTime},${formStore.certEndTime}`
			
		}
	}
	//获取商户信息数据
	const getMerchantInfoData = async ()=>{
		const res = await getMerchantInfo()
		formStore.$patch(res.result)
		///开户城市
		const cityCodes = formStore.bankAddress.split(',')
		const cityNames = formStore.bankCity.split(',')
		//经营区域
		const storeAreaNames = formStore.bussinessArea.split(',')
		//身份证有效期
		const certValidTimes = formStore.certValidTime.split(',')
		
		if(cityCodes.length == 1){
			formStore.provinceCode = cityCodes[0]
			formStore.provinceName = cityNames[0]
		}
		if (cityCodes.length > 1){
			formStore.provinceCode = cityCodes[0]
			formStore.cityCode = cityCodes[1]
			formStore.provinceName = cityNames[0]
			formStore.cityName = cityNames[1]
		}
		if(storeAreaNames.length == 2){
			formStore.storeProvinceName = storeAreaNames[0]
			formStore.storeCityName = storeAreaNames[1]
		}
		if(storeAreaNames.length > 2){
			formStore.storeProvinceName = storeAreaNames[0]
			formStore.storeCityName = storeAreaNames[1]
			formStore.storeAreaName = storeAreaNames[2]
		}
		if(certValidTimes.length > 1){
			formStore.certStartTime = certValidTimes[0]
			const endTime = certValidTimes[1]
			if (endTime == '长期') {
				formStore.certEndTime = ''
				formStore.isLongTime = true
			}
			else{
				formStore.certEndTime = endTime
			}
		}
	}
	//下一步
	const buttonClick = ()=> {
		if(uni.$u.test.isEmpty(formStore.frontPhoto)){
			uni.$tools.showToast('请上传身份证正面照片')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.reversePhoto)){
			uni.$tools.showToast('请上传身份证反面照片')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.handsetPhoto)){
			uni.$tools.showToast('请上传手持身份证照片')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.userRealName.trim())){
			uni.$tools.showToast('请输入姓名')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.identityNo.trim())){
			uni.$tools.showToast('请输入身份证号')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.certStartTime)){
			uni.$tools.showToast('请选择有效期开始日期')
			return
		}
		else if(uni.$u.test.isEmpty(formStore.certEndTime) && !formStore.isLongTime){
			uni.$tools.showToast('请选择有效期结束日期')
			return
		}
		else if (uni.$u.test.isEmpty(uni.$tools.clearSpaceAndEnter(formStore.address))) {
			uni.$tools.showToast('请输入住址')
			return
		}
		else if (formStore.merType == '0' && uni.$u.test.isEmpty(formStore.settleType)) {
			uni.$tools.showToast('请选择结算账户类型')
			return
		}
		if(formStore.settleType == '0'){
			uni.navigateTo({
				url:'/pages/auth/bankcard-public/bankcard-public'
			})
		}
		else{
			uni.navigateTo({
				url:'/pages/auth/bankcard/bankcard'
			})
		}
		
	}
</script>

<style lang="scss" scoped>
.idcard-info-box{
	font-size: 28rpx;
	.idcard-info-top-box{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		color: $xh-subtitle-color;
		.title{
			margin-bottom: 10rpx;
		}
	}
	.idcard-info-images-box{
		padding: 30rpx;
		background-color: white;
		box-sizing: border-box;
		.idcard-info-images-top-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.idcard-info-image{
				width: 336rpx;
				height: 221rpx;
				border-radius: 16rpx;
				&:nth-child(2){
					margin-right: auto;
					margin-left: 30rpx;
				}
			}
		}
		.idcard-info-images-bottom-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 16rpx;
			border: 1px dashed #707070;
			border-radius: 20rpx;
			margin-top: 30rpx;
			.idcard-info-hand-image{
				width: 313rpx;
				height: 204rpx;
				border-radius: 16rpx;
				&:nth-child(2){
					margin-right: auto;
					margin-left: 30rpx;
				}
			}
		}
	}
	.idcard-info-title{
		padding: 30rpx;
		color: $xh-subtitle-color;
	}
	.type-top-box {
		position: relative;
		display: flex;
		align-items: center;
		background-color: white;
		height: 100rpx;
		padding-left: 30rpx;
	
		.type-top-text {
			margin-right: 80rpx;
		}
	
		.type-radio {
			margin-left: 40rpx;
		}
	
		.type-line {
			position: absolute;
			left: 30rpx;
			right: 0;
			bottom: 0;
			height: 1px;
			transform: scaleY(0.5);
			background-color: $xh-line-color;
		}
	}
			
}
</style>
